<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <div class="mb-10" style="display:flex;">
        <div style="width:230px;">
          <el-input
            placeholder="请输入订单编号/VIP姓名"
            v-model="queryInfo.keywords"
            clearable
            size="mini"
            style="min-width:180px;"
            @clear="getOrderList"
          >
            <el-button
              slot="append"
              size="mini"
              icon="el-icon-search"
              @click="getOrderList"
              clearable
            ></el-button>
          </el-input>
        </div>
        <!-- 是否会员 -->
        <div class="ml-20 labelInfo">
          <div class="label">是否VIP</div>
          <el-select v-model="isVip" size="mini" style="width:80px;" @change="getOrderList">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </div>
        <!-- 是否会员 -->
        <div class="ml-20 labelInfo">
          <div class="label">性别</div>
          <el-select v-model="sexRadio" size="mini" style="width:80px;" @change="getOrderList">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="男" :value="0"></el-option>
            <el-option label="女" :value="1"></el-option>
          </el-select>
        </div>
        <!-- 结账方式 -->
        <div class="ml-20 labelInfo">
          <div class="label">结账方式</div>
          <el-select v-model="activePay" size="mini" style="width:80px;" @change="getOrderList">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="现金" :value="0"></el-option>
            <el-option label="微信" :value="1"></el-option>
            <el-option label="支付宝" :value="2"></el-option>
            <el-option label="余额" :value="3"></el-option>
          </el-select>
        </div>
        <!-- 日期 -->
        <div class="ml-20 dateClass labelInfo">
          <div class="label">日期</div>
           <el-date-picker
            v-model="valueDate"
            size="mini"
            type="daterange"
            align="center"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="getOrderList"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
      </div>

      <!-- 用户列表区域 -->
      <el-table
        :data="orderList"
        stripe
        size="mini"
        highlight-current-row
        height="calc(100vh - 260px)"
        :show-overflow-tooltip="true"
        :show-summary="true"
      >
        <template slot="empty"><el-empty description="暂无数据"></el-empty></template>
        <el-table-column type="expand">
          <template #default="{row}">
            <el-table
              :data="row.order_shop"
              size="mini"
              :show-overflow-tooltip="true"
              :show-summary="true"
            >
              <el-table-column sortable label="商品名称" prop="shop_name" min-width="120px"></el-table-column>
              <el-table-column sortable label="商品价格" prop="shop_price" min-width="120px"></el-table-column>
              <el-table-column sortable label="购买数量" prop="shop_sum" min-width="120px"></el-table-column>
              <el-table-column sortable label="总花费" prop="shop_total" min-width="120px"></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column sortable type="index" label="序号"></el-table-column>
        <el-table-column sortable label="订单编号" prop="order_sum" min-width="120px"></el-table-column>
        <el-table-column sortable label="创建时间" prop="newDay" min-width="140px">
          <template #default="{row}">{{row.newDay.substring(0,10) +' '+row.newHours}}</template>
        </el-table-column>
        <el-table-column sortable label="结账方式" prop="activePay" min-width="80px" align="center" header-align="center"> 
          <template #default="{row}">
            <el-tag size="small" type="danger" v-if="row.activePay==0">现金</el-tag>
            <el-tag size="small" type="success" v-else-if="row.activePay==1">微信</el-tag>
            <el-tag size="small" v-else-if="row.activePay==2">支付宝</el-tag>
            <el-tag size="small" type="info" v-else>会员余额</el-tag>
          </template>
        </el-table-column>
        <el-table-column sortable label="性别" prop="sexRadio" min-width="60px">
          <template #default="{row}">
            <el-tag size="small" type="danger" v-if="row.sexRadio">女</el-tag>
            <el-tag size="small" v-else>男</el-tag>
          </template>
        </el-table-column>
        <el-table-column sortable label="会员" prop="nickname" min-width="60px">
          <template #default="{row}">
            <el-tag size="small" v-if="row.isVip">是</el-tag>
            <el-tag size="small" type="danger" v-else>否</el-tag>
          </template>
        </el-table-column> 
        <el-table-column sortable label="会员姓名" prop="nickname" min-width="80px">
          <template #default="{row}">
            <el-tag size="small" v-if="row.nickname">{{row.nickname}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column sortable label="订单总额" prop="order_total" min-width="100px" align="center">
          <template #default="{row}">
            <el-tag size="small" type="success">{{row.order_total || 0}} 元</el-tag>
          </template>
        </el-table-column>
        <el-table-column sortable label="实收金额" prop="payMoney" min-width="100px" align="center">
          <template #default="{row}">
            <el-tag size="small" type="danger">{{row.payMoney || 0}} 元</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="60px">
          <template #default="{row}">
            <i class="el-icon-delete deleteIcon" @click="removeOrder(row.order_id)"></i>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        size="mini"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[10, 20, 50]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
import { order } from '@/api/order.js'
import { newDate } from '@/utils/newDate'
export default {
  data() {
    return {
      orderList: [],
      // 获取用户列表的参数对象
      queryInfo: {
        keywords: '',
        page: 1,
        pagesize: 10 
      },
      total: 0,
      valueDate: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      isVip: null, // 是否VIP
      sexRadio: null, // 性别
      activePay: null, // 结账方式
    }
  },
  created() {
    this.valueDate[0] = newDate().year + '-' + newDate().month + '-' + newDate().day
    this.valueDate[1] = newDate().year + '-' + newDate().month + '-' + newDate().day
    this.getOrderList()
  },
  methods: {
    // 获取初始订单数据
    async getOrderList() {
      // if (JSON.stringify(this.isVip) === 'null') return
      console.log(this.valueDate, this.isVip, this.sexRadio, this.activePay)
      const parms = {
        ...this.queryInfo,
        startData: this.valueDate && this.valueDate[0],
        endData: this.valueDate && this.valueDate[1],
        isVip: this.isVip, 
        sexRadio: this.sexRadio, 
        activePay: this.activePay
      }
      const { data: res } = await order.list(parms)
      if (res.status !== 0) return this.$message.error(res.message)
      console.log(res)
      this.orderList = res.data
      this.total = res.total
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getOrderList()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getOrderList()
    },
    // 根据id删除对应的用户信息
    async removeOrder(id) {
      // 弹框询问用户是否删除数据
      const confirmRsults = await this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 确认删除 confirm；取消删除 cancel
      if (confirmRsults !== 'confirm') return this.$message.info('已取消删除')

      // console.log('确认删除')
      const { data: res } = await order.delete(id)
      console.log(res)
      if (res.status !== 0) return this.$message.error('删除订单失败')
      this.$message.success('删除订单成功')
      this.getOrderList()
    },
  }
}
</script>

<style scoped lang="less">
/deep/.el-dialog__body {
  padding-right: 50px;
}
.deleteIcon{
  font-size: 16px;
  cursor: pointer;
  // color: #f56c6c;
  &:hover{color: #f56c6c;}
}
/deep/.el-table__expanded-cell{
  padding-top: 0;
  .el-table{
    margin-top: 0;
  }
}
/deep/.dateClass{
  .el-date-editor--daterange.el-input, 
  .el-date-editor--daterange.el-input__inner, 
  .el-date-editor--timerange.el-input, 
  .el-date-editor--timerange.el-input__inner {
    width: 220px;
  }
}
</style>
